<template>
  <div class="hourly-energy">
    <div class="top-nav"></div>
    <div class="hourly-content">
      <section class="titile-icon">
        <div class="title-box">逐时能耗</div>
      </section>

      <section class="point-echart">
        <div class="point-box" v-if="datas.length != 0">
          <Vechart class="option" :options="scatterOption"></Vechart>
        </div>
        <dv-loading v-else></dv-loading>
      </section>

      <section class="bottom-search">
        <div class="date_select">
          <span class="time_text">时间选择</span>
          <el-date-picker
            @change="dateChange"
            :picker-options="pickerOptions"
            v-model="dateArea"
            class="date-picker"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <div class="confirm_select" @click="confirmQuery">查询</div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import {
  searchStatisticalDataByStationNew,
  searchDatasDetail,
} from "../../api/base8090.js";
import Vechart from "../../components/charts/Vcharts";
import { mapState } from "vuex";
import { getDateArea } from "../../utils/mytime.js";
export default {
  components: {
    Vechart,
  },
  data() {
    return {
      days: [],
      timeTitle: "",
      dialogTableVisible: false,
      ids: sessionStorage.getItem("stationCode"),
      dataObj: {
        stationCode: sessionStorage.getItem("stationCode"),
        startTime: getDateArea(6)[0],
        endTime: getDateArea(6)[1],
      },
      queryDetailParmas: {
        stationCode: sessionStorage.getItem("stationCode"),
        time: "2021-08-03",
      },
      detailData: [],
      dateArea: getDateArea(6),
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.choiceDate !== "") {
            const one = 6 * 24 * 3600 * 1000;
            const minTime = this.choiceDate - one;
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() > Date.now() - 8.64e7 ||
              time.getTime() < minTime ||
              time.getTime() > maxTime
            );
          } else {
            return time.getTime() > Date.now() - 8.64e7;
          }
        },
      },
      datas: [],
    };
  },
  mounted() {},
  created() {
    this.getSystemDate();
  },
  methods: {
    dateChange() {
      // console.log(this.dateArea);
      if (this.dateArea) {
        let days =
          (new Date(this.dateArea[1]) - new Date(this.dateArea[0])) /
          (1000 * 3600 * 24);

        if (days !== 6) {
        }
      }
      if (this.dateArea == null) {
        console.log(456);
        // this.initList(this.dataObj)
      }
    },
    async confirmQuery() {
      if (this.dateArea) {
        this.dataObj.startTime = this.dateArea[0];
        this.dataObj.endTime = this.dateArea[1];
        this.days = [];
        this.datas = [];
        let res = await searchStatisticalDataByStationNew(this.dataObj);
        // console.log(res)

        if (res.code == 200) {
          this.days = res.data.days;
          this.datas = res.data.datas;
        } else {
          this.$message.error("响应超时，服务异常！");
        }
      } else {
        this.$message({
          message: "请选择时间段！",
          type: "warning",
        });
      }
    },
    async getSystemDate() {
      let res = await searchStatisticalDataByStationNew(this.dataObj);
      if (res.code == 200) {
        this.days = res.data.days;
        this.datas = res.data.datas;
      } else {
        this.$message.error("响应超时，服务异常！");
      }
    },
  },
  computed: {
    id: function () {
      return parseInt(Math.random() * 1000000);
    },
    scatterOption() {
      let seriesArr = [];
      for (let index = 0; index < this.days.length; index++) {
        seriesArr.push({
          name: this.days[index],
          type: "bar",
          markPoint: {
            // 设置最大值和最小值
            data: [
              { name: "Max", value: Math.max(...this.datas[index]) },
              { name: "Min", value: Math.min(...this.datas[index]) },
            ],
          },
          data: this.datas[index],
        });
      }

      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          left: "4%",
          right: "6%",
          bottom: "0%",
          containLabel: true,
        },
        color: [
          "#0FD3E8",
          "#8FEEF8",
          "#69BEC7",
          "#4676BF",
          "#29FFDE",
          "#11A0D5",
          "#027FFF",
        ],
        legend: {
          data: this.days,
          textStyle: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: [
              "24时",
              "1时",
              "2时",
              "3时",
              "4时",
              "5时",
              "6时",
              "7时",
              "8时",
              "9时",
              "10时",
              "11时",
              "12时",
              "13时",
              "14时",
              "15时",
              "16时",
              "17时",
              "18时",
              "19时",
              "20时",
              "21时",
              "22时",
              "23时",
            ],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#84BFDD",
              },
            },
            axisLabel: {
              color: "#84BFDD",
              fontSize: "0.08rem",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "耗电量(kWh)",
            nameTextStyle: {
              color: "#84BFDD",
              fontSize: "0.08rem",
            },
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#84BFDD",
              },
            },
            axisLabel: {
              formatter: "{value}",
              color: "#84BFDD",
              fontSize: "0.08rem",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#84BFDD",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: seriesArr,
      };
    },
    ...mapState(["stationCode"]),
  },
  watch: {
    stationCode(newVal, oldVal) {
      if (newVal != oldVal) {
        this.dataObj.stationCode = newVal;
        this.queryDetailParmas.stationCode = newVal;

        searchDatasDetail(this.queryDetailParmas).then((res) => {
          if (res.code == 200) {
            this.detailData = res.data;
          }
        });

        this.getSystemDate();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.hourly-energy {
  width: 100%;
  height: 100%;

  .top-nav {
    width: 100%;
    height: 0.41rem;
  }
  .hourly-content {
    width: 100%;
    height: calc(100% - 0.41rem);
    position: relative;
    .titile-icon {
      width: 100%;
      height: 6%;
      // background-color: #c49898;
      .title-box {
        font-weight: bold;
        font-size: 22px;
        color: #ffffff;
        text-align: center;
        width: 220px;
        height: 44px;
        line-height: 44px;
        background: url("../../assets/img/ti.png") no-repeat center;
        background-size: cover;
      }
    }
    .point-echart {
      width: 86%;
      height: 82%;
      margin: 0 auto;
      padding: 20px;
      // background-color: #21894c;
      .point-box {
        width: 100%;
        height: 100%;
      }
    }
    .bottom-search {
      width: 100%;
      height: 12%;
      .date_select {
        width: 100%;
        height: 100%;
        display: flex;
        // background-color: #6a92ea;
        justify-content: center;
        align-items: center;
        .date-picker {
          height: 44px;
          background-color: #091c37;
          border: 1px solid #0a73b1;
          color: #28c2ff !important;
        }
        /deep/ .el-range-input {
          background-color: #091c37;
          color: #28c2ff;
        }

        .time_text {
          margin: 0 40px;
          font-size: 18px;
          color: #0fd3e8;
        }
        .confirm_select {
          cursor: pointer;
          margin: 0 40px;
          width: 120px;
          height: 44px;
          background: #0fd3e8;
          border-radius: 6px;
          text-align: center;
          line-height: 44px;
          font-size: 16px;
          font-weight: bold;
          color: #243d74;
        }
      }
    }
  }
}
</style>
